<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .myRed {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    {{msg}}
    <br/>
    <input type="button" v-bind:title="myTitle+ '这是字符串'" @click="show" value="保存"/>
    <!--    简写-->
    <div :class="myClass" :title="myTitle + '标题'">测试v-bind的简写</div>
    <!--    单引号是字符串，不加是变量  -->
    <input @keydown.f2="show" width="100%" v-model="inputMsg" v-focus v-color="'blue'"/>
    <br/>
    <input v-model="xlFontSize"/>
    <div v-xlsize="xlFontSize">这是xlsize:{{inputMsg}}</div>
    <br/>
    for循环：<br/>
    <span v-for="item in list">{{item}} &nbsp;</span><br/>
    <span v-for="item in listObject">{{item.id}}-{{item.name}}&nbsp;</span> <br/>
    <span v-for="item in 10">{{item}}&nbsp;</span>
    <br/>
    日期格式化：
    {{myDate | dateFormat}} <br/>
    {{msg | first | second}}
</div>
<div id="app2">
    <h3 v-cloak>---{{msg}}-----</h3>
    <h3 v-text="msg"></h3>
    {{msg1}}
    <div v-html="msg1"></div>
    <h1 :style="{color:'red','font-weight':200}">样式测试</h1>
    {{xlDate| dateFormat}}
</div>
<script src="lib/vue.js"></script>
<script>
    <!--    自定义全局按键符-->
    Vue.config.keyCodes.f2 = 113;
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        },
    })
    /**
     * @data
     */
    Vue.filter('dateFormat', (data) => {
        //日期格式化
        let y = data.getFullYear();
        let m = data.getMonth() + 1;
        if (m < 10) {
            m = "0" + m;
        }
        let d = data.getDate();
        return `${y}-${m}-${d}`;
    });
    Vue.filter('first', data => data + "第一个过滤");
    Vue.filter('second', data => data + "第二个过滤");
    var vue = new Vue({
        el: '#app',
        data: {
            msg: '你好啊',
            myTitle: '这是标题',
            count: 1,
            myClass: {myRed: true},
            list: [1, 2, 3, 4, 5],
            listObject: [{id: 1, name: '张三'}, {id: 2, name: '李四'}],
            myDate: new Date(),
            inputMsg: '这是实现双向绑定的输入框，点击F2 触发按钮点击事件',
            xlFontSize: '15px'
        },
        methods: {
            show: function () {
                this.msg = this.msg + this.count;
            }
        },
        directives: {
            'color': {
                // 指令的定义
                bind: function (el) {
                    el.style.color = 'red';
                },
                update: function (e1, col) {
                    e1.style.color = col.value;
                }
            },
            'xlsize': function (el, binding) {
                let fontsize = parseInt(binding.value) + 'px';
                el.style.fontSize = fontsize;
            }
        }
    });
    var vm = new Vue({
        el: "#app2",
        data: {
            msg: "呵呵!!",
            msg1: "<h1>这是h1标题</h1>",
            xlDate: new Date()
        },
        filters: {
            // 私有过滤器，过滤器名称和条件
            dateFormat: function (data, pattern = "") {
                //日期格式化
                let y = data.getFullYear();
                //padStart补0
                let m = (data.getMonth() + 1).toString().padStart(2, '0');
                let d = data.getDate();
                return `${y}-${m}-${d}。私有的`;
            }
        }
    });

</script>
</body>
</html>
